//  7、类组件的生命周期
//  constructor 会在组件创建时，最先执行
//  render  开始渲染组件，每次组件渲染都会触发
//  componentDidMount，组件挂载完成
//  componentDidUpdate 在组件每次重新挂载完成后执行
//  componentWillUnmount 组件将要被卸载


import React, {Component} from 'react';
import './Seven.css'
class Seven extends Component {
    state = {
        count : 5
    }
    setCount = () => {
        this.setState({
            count : ++this.state.count
        })
    }
    // 构造函数，会在组件创建时，最先执行
    constructor() {
        // 继承父类的构造函数
        super();
        console.log('constructor，开始构造组件')
    }
    // 组件开始渲染,render方法在组件每次渲染时都会触发，第一次和每次状态更新后
    render() {
        let { count } = this.state;
        console.log('render，开始渲染组件')
        return (
            <div className='seven'>
                <h2>Seven</h2>
                <div>数量：{ count }</div>
                <button onClick={this.setCount}>修改count</button>
            </div>
        );
    }
    // 在组件第一次挂载完成后执行
    componentDidMount() {
        console.log('componentDidMount，组件挂载完成')
    }
    // 在组件每次重新挂载完成后执行
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate,组件重新挂载完成后执行')
    }
    // 组件将要被卸载，在这里面做一些善后操作(清除计时器等)
    componentWillUnmount() {
        console.log('componentWillUnmount,组件将要被卸载')
    }
}

export default Seven;
